<!DOCTYPE html>

<html>
    <head>
        <title>DIF : Albergues</title>
        <meta charset="${_response_encoding}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/bootstrap.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/bootstrap-responsive.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/main.css'}">
        #{get 'moreStyles' /}
        <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
        <script src="@{'/public/javascripts/jquery-1.9.1.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/bootstrap.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        #{get 'moreScripts' /}

        <script>
            $(document).ready(function() {
                positionFooter();

                $(window)
                        .scroll(positionFooter)
                        .resize(positionFooter);

                function positionFooter() {
                    var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
                    if (docHeight < $(window).height()) {
                        var diff = $(window).height() - docHeight;
                        if (!$("#sticky-footer-push").length > 0) {
                            $(".footer").before('<div id="sticky-footer-push"></div>');
                        }
                        $("#sticky-footer-push").height(diff);
                    }
                }
            });
        </script>

    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">

                    <a class="brand" href="@{Home.index()}"></a> 

                    <ul class="nav">
                        #{if session.get('username')}
                        <!--  <li class="active"><a href="#">Home</a></li> -->
                        <li><a href="@{Categorias.list()}">Categorias</a></li>
                        <li><a href="@{Enlaces.list()}">Enlaces</a></li>
                        <li><a href="@{Usuarios.list()}">Usuarios</a></li>
                        #{/if}
                    </ul>
                    <ul class="nav pull-right">

                        <li class="dropdown" id="menu1">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
                                #{if session.get('username')}
                                    ${session.get('username')}
                                #{/if}
                                #{else}
                                    Iniciar Sesión
                                #{/else}
                                <b class="caret"></b>
                            </a>
                            <div class="dropdown-menu">

                                #{if flash.error}
                                <div class="alert alert-error" style="margin-left: 8px; margin-right: 8px; margin-top: 8px;">
                                    <button type="button" class="close" data-dismiss="alert">×</button>
                                    Error al Iniciar Sesión.
                                </div>
                                #{/if}
                                #{if session.get('username')}
                                <div style="margin-left: 8px; margin-right: 8px">
                                    #{form @Security.disconnect()}
                                        <input class="btn btn-danger" type="submit" id="signout" value="&{'secure.signout'}" />
                                    #{/form}
                                </div>
                                #{/if}
                                #{else}

                                <div style="margin-left: 8px; margin-right: 8px">
                                    #{form @Secure.authenticate()}
                                    <div style="margin-left: 8px; margin-right: 8px">
                                        <input style="margin-top: 8px" type="text" name="username" id="username" placeholder="Usuario"  value="${flash.username}" />
                                        <input style="margin-top: 8px" type="password" name="password" id="password" placeholder="Contraseña" value="" />
                                        <input class="btn btn-success" type="submit" id="signin" value="&{'secure.signin'}" />
                                    </div>
                                    #{/form}
                                </div>
                                #{/else}

                            </div>
                        </li>
                    </ul>
                </div>   
            </div> 
        </div> 

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12">
                    #{doLayout /}
                </div>  
            </div>
        </div> 

        <div class="footer navbar-fixed-bottom" style="position: static;">

            <p>
                <strong>Desarrollo Integral de la Familia del Estado de Chihuahua.</strong><br>
                Av. Tecnológico 2903, Col. Magisterial 31310<br>
                Tel. (614) 214-4000, Fax: (614) 413-7689 <br>
                <a href="#">contacto@difchihuahua.gob.mx</a><br>
                Chihuahua, Chih., Mexico
            </p>
        </div>
        <script language="javascript">

            $('.dropdown-toggle').dropdown();
            $('.dropdown-menu').find('form').click(function(e) {
                e.stopPropagation();
            });
        </script>
    </body>
</html>
